<template>
  <div class="person">
    <h2>一辆{{ brand }}车，价值{{ price }}万</h2>
    <button @click="changeBrand">修改汽车的品牌</button>
    <button @click="changePrice">修改汽车的价值</button>
  </div>
</template>

<script setup>
import { ref, toRefs } from 'vue';

let car = ref({ brand: '奔驰', price: 100 })
let { brand, price } = toRefs(car.value)

function changeBrand() {
  brand.value = '宝马'
  console.log(car.value);
}

function changePrice() {
  price.value = 101
}

</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>